// 版本控制
<template>
  <div class="versionControl">
    <div class="top">
      <p class="title">APP版本管理</p>
      <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
    </div>
    <template>
      <el-table
        :data="listData"
        border
        style="width: 1500px">
        <el-table-column
          align="center"
          fixed
          label="序号"
          type="index"
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="appVersion"
          label="版本号"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          prop="appType"
          label="类型"
          width="120">
          <template slot-scope="scope">
            <span v-show="scope.row.app == 0">经纪人端</span>
            <span v-show="scope.row.app == 1">购房者端</span>
            <span v-show="scope.row.app == 2">管家端</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="city"
          label="APP"
          width="120">
          <template slot-scope="scope">
            <span v-show="scope.row.appType == 0">IOS</span>
            <span v-show="scope.row.appType == 1">Android</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="上传时间"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="isforce"
          label="是否强制更新"
          width="120">
          <template slot-scope="scope">
            <span v-show="scope.row.isforce == 0">否</span>
            <span v-show="scope.row.isforce == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="versionCode"
          label="迭代版本号"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="updataUrl"
          label="下载路径">
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      style="margin-top:20px"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageData.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageData.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    
    <el-dialog
      title="添加APP"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose">
      <el-form :inline="true" class="demo-form-inline" label-width="100px" label-position="left">
        <el-form-item label="版本号" >
          <el-input v-model="addForm.versionNum" placeholder=""  size="mini"></el-input>
        </el-form-item>
        <el-form-item label="APP">
          <el-radio-group v-model="addForm.radioApp">
            <el-radio label="0">IOS</el-radio>
            <el-radio label="1">Android</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="file">
          <uploadImg ref="upLoadNode" @uploadSuccess="uploadSuccess"></uploadImg>
        </el-form-item>
        <el-form-item label="迭代版本号" >
          <el-input v-model="addForm.updateVersionNum" placeholder=""  size="mini"></el-input>
        </el-form-item>
        <el-form-item label="是否强制更新">
          <el-radio-group v-model="addForm.radioUpdate">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="addForm.radioType">
            <el-radio label="0">经纪人端</el-radio>
            <el-radio label="1">购房者端</el-radio>
            <el-radio label="2">管家端</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left">
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button type="primary" @click="handleCancle">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/apiPath"
import uploadImg from './xkuploadImg'
import util from '@/common/utils'
export default {
  name:"versionControl",
  title:'强更版本控制',
  components: {uploadImg},
  data() {
    return {
      dialogVisible:false,
      listData:[],
      total:0,
      pageData:{
        pageSize:10,
        pageNum:1
      },
      addForm:{
        versionNum:'',
        radioApp:'',
        updateVersionNum:'',
        radioUpdate:'',
        radioType:'',
        url:undefined,
      }

    }
  },
  mounted() {},
  created() {
    this.getListData()
  },
  activated(){
    this.getListData()
  },
  methods: {
    // 添加
    handleAdd(){
        this.dialogVisible = true
        this.addForm.url = ''
        this.$nextTick(()=>{
            this.$refs.upLoadNode.fileList = []
        })
    },
    
    uploadSuccess(data) {
        this.addForm.url = data // 文件地址
    },
    // 保存
    handleSave(){
      // 版本号
      if(!this.addForm.versionNum){
        this.$message({
          type:'warning',
          message:'请填写版本号'
        })
        return
      }
      // APP
      if(this.addForm.radioApp !='0' && this.addForm.radioApp !='1'){
        console.log(this.addForm.radioApp)
        this.$message({
          type:'warning',
          message:'请选择APP类型'
        })
        return
      }
      // 迭代版本号
      if(!this.addForm.updateVersionNum){
        this.$message({
          type:'warning',
          message:'请填写迭代版本号'
        })
        return
      }
      // // 是否强制更新
      if(this.addForm.radioUpdate !='0' && this.addForm.radioUpdate !='1'){
        this.$message({
          type:'warning',
          message:'请选择是否强制更新'
        })
        return
      }
      // 类型
      if(this.addForm.radioType !='0' && this.addForm.radioType !='1' && this.addForm.radioType !='2'){
        this.$message({
          type:'warning',
          message:'请选择类型'
        })
        return
      }
      let url = undefined
      if(this.addForm.url){
        url = this.addForm.url[0]
      }
      this.$axios.post('/city/version/addversion',{
        url:url,  // 文件
        appVersion:this.addForm.versionNum,  // 版本号
        versionCode:this.addForm.updateVersionNum, // 迭代版本号
        isforce:this.addForm.radioUpdate, // 是否强制更新
        app:this.addForm.radioType, // 类型
        appType:this.addForm.radioApp // app
      }).then(res=>{
        console.log(res)
        this.$message({
          type:'success',
          message:'添加成功'
        })
        this.getListData()
        this.dialogVisible = false
        this.clearData()
      }).catch(error=>{
        console.log(error)
        this.$message.error('迭代版本号填写错误')
      })
    },
    clearData(){
      this.addForm = {
        versionNum:'',
        radioApp:'',
        updateVersionNum:'',
        radioUpdate:'',
        radioType:'',
        file:'',
      }
    },
    // 取消
    handleCancle(){
      this.dialogVisible = false
      this.clearData()
    },
    // 获取列表数据
    getListData(){
      this.$axios.post('/city/version/list',{
        limit:this.pageData.pageSize,
        pageNum:this.pageData.pageNum,
        order:'asc',
        offset:0
      }).then(res=>{
        console.log(res)
        this.listData = res.list
        this.total = res.total
      })
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getListData()
    },
    handleCurrentChange(val) {
      this.getListData()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
  },
  computed: {}
}
</script>
<style lang="stylus" scoped>
  .versionControl {
    .top{
      margin-bottom :30px;
    }
    .title{
      font-size :16px;
      font-weight :500;
      margin-bottom :20px;
    }
  }
</style>